<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p2_固定定位广告条</title>
    <style>
        .top {
            height: 120px;
            color: #fff;
            /*width: 100%;*/
            font-size: 30px;
            background-color: #5AA4AE;
            position: fixed;
            top: 0;
            /*设置宽度为视口（view port）宽度的100%*/
            width: 100vw;
        }
        .left,.right{
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left{
            left: 10px;
            background-color: #FFF799;
        }
        .right{
            right: 10px;
            background-color: #F35366;
        }
        .main{
            margin-top: 130px;
        }
    </style>
</head>
<body>
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="main">
    我是内容
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias architecto asperiores eligendi illum ipsum? Beatae,
        commodi consequuntur deserunt dicta enim fugit harum illo magni officiis, porro quidem, similique vero! Quas!
    </div>
    <div>Deleniti facilis laboriosam molestias nihil, qui ratione ut voluptates. Amet eligendi esse fugit iusto, odit
        perferendis qui reiciendis temporibus voluptatum? Asperiores aut beatae debitis ducimus molestias nesciunt quos
        sequi, sunt.
    </div>
    <div>At quae, ullam! Accusamus beatae consectetur expedita maiores nihil perferendis porro vitae. Aliquid atque commodi
        cum cupiditate, distinctio eius eum illo iure labore laborum laudantium quia repellat sapiente, suscipit
        voluptatibus?
    </div>
    <div>A alias animi, asperiores at, beatae corporis dolorem ducimus earum eius enim facere libero modi nihil odit placeat
        praesentium qui, quia quisquam repellat repudiandae saepe sit totam velit. Facilis, quia?
    </div>
    <div>Ad aliquam animi aperiam debitis deleniti dignissimos dolores doloribus et excepturi, fugiat inventore laboriosam
        nesciunt obcaecati quae rerum, sequi similique totam unde veritatis vero? Beatae eos iusto odit pariatur
        reprehenderit?
    </div>
    <div>Accusantium beatae commodi dolores dolorum esse laudantium necessitatibus, numquam quas recusandae repellendus?
        Commodi cum eligendi ex excepturi incidunt minus modi molestiae mollitia, nemo nobis omnis quidem repellendus
        sapiente sed temporibus?
    </div>
    <div>Ab dolorem eos et, fugit itaque nam optio sapiente. Culpa dolore hic repudiandae sunt? Cumque excepturi illum modi
        quaerat quia, sapiente. Accusamus accusantium architecto ipsa perferendis perspiciatis placeat quam quo?
    </div>
    <div>Alias aspernatur assumenda at blanditiis corporis delectus, doloremque dolorum ea error excepturi iure minima minus
        mollitia neque nulla perspiciatis praesentium provident quisquam ratione repellendus rerum tenetur voluptates! Est,
        et, magni.
    </div>
    <div>A commodi consequuntur deserunt dicta dolorem dolorum esse et itaque nemo nihil quas, repellat, rerum tempore ullam
        unde veniam, veritatis? Cumque dolor earum, eligendi hic illo nobis rerum unde vel?
    </div>
    <div>Accusantium dignissimos est, laboriosam minus soluta tempora voluptatem? A amet animi architecto ea eum expedita
        illo impedit incidunt magnam magni, minus molestiae officiis quisquam recusandae repellat velit vitae voluptas
        voluptates!
    </div>
    <div>Consectetur ea ex expedita hic, impedit, ipsum libero magnam odio, porro quae quo voluptatibus? Error hic minus
        nulla quos. At commodi consequatur cumque dolore dolorem explicabo harum iste? Blanditiis, qui.
    </div>
    <div>Ab accusantium aliquam aliquid aperiam at consequuntur dolores ea esse est, harum, inventore ipsum itaque magnam
        minus nisi nostrum obcaecati praesentium quam quisquam reiciendis rem saepe sapiente sint tempora vitae.
    </div>
    <div>Alias aliquid amet aut consequuntur cumque delectus dolorem, dolores earum error esse exercitationem explicabo
        fugiat iure, labore laudantium magnam minima nihil, nisi odio qui recusandae reprehenderit saepe similique unde
        voluptatibus!
    </div>
    <div>Adipisci aliquam aliquid asperiores consequatur consequuntur cum deleniti dolore doloremque dolores doloribus
        ducimus eaque eius eligendi esse facere facilis itaque labore laudantium magni, minima quasi, quo repellendus
        sapiente ullam voluptatem.
    </div>
    <div>Accusantium adipisci aliquam assumenda beatae blanditiis deserunt distinctio earum, excepturi exercitationem neque
        nobis officiis omnis optio provident quas saepe tempore vero voluptate. Beatae itaque minima mollitia nihil quo ut
        voluptatum.
    </div>
    <div>A accusamus amet animi beatae corporis culpa cumque deleniti distinctio dolore dolores fugit impedit, inventore
        labore laudantium minima nihil obcaecati possimus quia quibusdam repudiandae, sequi veritatis vitae voluptates.
        Quod, veritatis.
    </div>
    <div>Ex, molestias voluptatibus? Architecto commodi, cumque dolorem doloribus earum eveniet facilis hic illo ipsam
        laborum mollitia neque obcaecati perspiciatis placeat tenetur veniam voluptates. Doloremque illo in quisquam tenetur
        ullam voluptatibus?
    </div>
    <div>Ad adipisci consequatur exercitationem hic, id, impedit laudantium magni natus officia perspiciatis possimus
        provident qui repellendus rerum veniam. Animi consectetur dolorem doloribus eum fugit inventore iste maiores modi
        nisi, possimus.
    </div>
    <div>Eaque enim maiores nesciunt perspiciatis quidem? A aliquam assumenda autem cupiditate dignissimos dolore doloribus
        eaque ex harum, hic natus nihil nisi obcaecati perspiciatis quam ratione rem, repudiandae sed, vel voluptatum.
    </div>
    <div>Autem eaque enim facere libero mollitia nobis recusandae tempora. Accusamus alias, architecto culpa dolor eligendi
        ex iure laboriosam libero maiores nisi numquam quas quia recusandae repellat reprehenderit saepe velit. Accusantium?
    </div>
    <div>Animi cupiditate dolor doloremque, earum, error excepturi expedita fugiat hic id labore laboriosam libero maiores
        maxime minus mollitia quisquam sapiente similique soluta tempora tenetur totam ullam vero. Aliquam doloremque,
        provident!
    </div>
    <div>Magnam molestiae nemo quasi, quisquam repellat reprehenderit vel? Dicta exercitationem fuga maxime neque quos
        tempora tempore. Alias est harum incidunt molestias necessitatibus nihil, obcaecati quo saepe! Earum ipsa maiores
        mollitia.
    </div>
    <div>Aliquam, molestiae vitae! Aperiam corporis cum, dicta, dignissimos eveniet libero modi nemo non omnis perspiciatis
        totam unde vel. Aliquid asperiores commodi ducimus eligendi est exercitationem incidunt libero quae sequi suscipit?
    </div>
    <div>Accusamus, amet blanditiis dicta ducimus expedita fugiat labore nihil pariatur quam quod ut velit, veniam? Alias,
        aliquam beatae consequatur doloremque eaque illum ipsa nisi perferendis, praesentium sequi tempore, tenetur
        veritatis?
    </div>
    <div>Ad at cumque ex incidunt laudantium nam omnis quos reprehenderit rerum tenetur! Aut beatae cum, dicta dignissimos
        ducimus ipsum itaque, iure mollitia nihil nobis officiis quam, soluta suscipit tempore temporibus?
    </div>
    <div>Animi, impedit incidunt ipsum maiores minus omnis, quas, quisquam quos rem unde veniam voluptatem? Ab aperiam,
        error est impedit ipsam libero numquam optio, placeat quia quidem quod rerum tempore vel.
    </div>
    <div>Inventore rem, sunt? Aliquid architecto doloremque earum eos error ipsa iusto laudantium, magnam minus nemo nisi
        numquam odio possimus quae quam quasi qui repellendus ullam vero voluptatem! Cupiditate, incidunt, magnam!
    </div>
    <div>Alias consequatur culpa earum eius esse fugit hic itaque mollitia perferendis placeat possimus quaerat qui quisquam
        quod, reprehenderit rerum temporibus. Commodi dolore laborum non quas quidem sit sunt. Culpa, iusto.
    </div>
    <div>Amet aut consectetur cupiditate ipsa libero modi neque nisi omnis repellendus vel. A alias consectetur deleniti est
        facilis ipsam magni neque nihil obcaecati odit quaerat repellendus rerum, sapiente voluptas voluptate.
    </div>
    <div>Adipisci aliquid cum deserunt dolorem, iste iusto quibusdam ut voluptatem voluptates? Assumenda fuga fugit illum in
        provident quas quod reprehenderit. Accusamus aliquam, dolore esse illum laboriosam nisi nostrum officiis
        perferendis.
    </div>
    <div>Amet aspernatur, assumenda consequuntur facere facilis ipsa maiores minima perspiciatis sint, unde veniam
        veritatis? Alias doloremque harum ipsa ipsam iure magni, minima molestiae, optio porro praesentium quisquam
        repellendus unde velit?
    </div>
    <div>A accusamus aliquam animi aut beatae blanditiis consequatur, cupiditate deserunt, eaque eligendi eveniet facilis
        inventore ipsa laboriosam laudantium magnam molestiae nihil quas quidem, quod reprehenderit rerum sed suscipit
        tempore ullam?
    </div>
    <div>Ab architecto at blanditiis dicta dolor dolores ea esse est, eum facere hic incidunt iste labore magnam maiores
        necessitatibus neque quae quasi qui repellat sapiente sed suscipit, temporibus, veniam voluptate?
    </div>
    <div>Assumenda atque, dignissimos et repellat saepe sunt tempora veritatis! A assumenda ipsa necessitatibus quas quia
        similique veniam. Ad asperiores aspernatur facilis, fugiat maxime mollitia obcaecati quo recusandae ut. Architecto,
        totam.
    </div>
    <div>A alias aperiam beatae blanditiis distinctio doloribus eligendi enim est et eveniet facilis, hic illo incidunt
        ipsam libero necessitatibus numquam perspiciatis quas quidem quo saepe sapiente sint sit veniam voluptatem!
    </div>
    <div>Ab delectus dignissimos hic ipsum provident, soluta! A adipisci deleniti dolor dolorum explicabo fugiat illo, vel.
        Alias beatae cupiditate deserunt enim est impedit, odio quis reiciendis, tempora, temporibus totam veritatis?
    </div>
    <div>Et illum incidunt repudiandae. Assumenda, aut delectus doloremque illo molestiae neque praesentium quo repellendus
        similique sint. Autem ex fuga inventore maxime sed? Assumenda, error facere fuga illo in optio qui!
    </div>
    <div>Ad aliquam assumenda culpa, cumque debitis deleniti dicta distinctio ea eaque eos excepturi fuga in incidunt ipsum,
        iure labore molestias nisi numquam optio qui quibusdam, reiciendis reprehenderit sapiente veniam vero!
    </div>
    <div>Alias amet architecto atque dolor ducimus fugiat ipsa necessitatibus, nemo provident quaerat quas sequi soluta vel
        veritatis voluptates. Ab accusantium animi aperiam cupiditate doloribus laboriosam maiores molestias neque rerum,
        temporibus!
    </div>
    <div>Adipisci aspernatur ducimus iste molestiae quas. Accusantium adipisci, aliquam atque deserunt earum est facere
        harum id incidunt iure, iusto laudantium nihil non officiis quam, rem similique velit voluptas voluptatem
        voluptatum.
    </div>
    <div>Accusamus aliquam dicta dolorum eum ipsa, ipsam iste laboriosam nostrum odio optio placeat quae quas quod
        voluptatem voluptates. Accusamus aliquid cum dignissimos distinctio eligendi et harum, incidunt perspiciatis ullam
        voluptatum?
    </div>
    <div>Aliquid, error, suscipit. Aut, delectus dolores doloribus ducimus enim error facilis hic in inventore itaque maxime
        minima odit officia pariatur, porro possimus quisquam recusandae repellendus reprehenderit sapiente velit veniam
        voluptates.
    </div>
    <div>Blanditiis deleniti id ipsum nam nihil tempora ullam. Excepturi iusto maiores nesciunt provident sit! Eveniet hic
        ipsa laborum minima natus neque quasi quibusdam ratione, rerum temporibus, veniam vero voluptas, voluptatem.
    </div>
    <div>Blanditiis deleniti dignissimos eum eveniet ipsam ipsum odio officiis pariatur possimus, quidem! Asperiores
        consectetur consequatur culpa dignissimos dolor eius eum labore magnam mollitia officiis, quae quaerat quisquam
        sapiente, suscipit veniam!
    </div>
    <div>Ad aut blanditiis ea, eius inventore itaque, iusto laboriosam nobis nulla odit quas quia rem repudiandae, sunt vel
        vero voluptas. Animi beatae deserunt doloremque eius esse excepturi maxime, nam suscipit!
    </div>
    <div>Accusamus accusantium autem commodi culpa eaque enim fugiat, fugit hic in iste iure iusto libero molestiae natus,
        nesciunt nobis odit praesentium qui ratione reprehenderit sapiente sit totam unde ut voluptas.
    </div>
    <div>Ab assumenda commodi minus quam quod! Aliquam animi asperiores at cumque earum necessitatibus repellendus sint
        soluta voluptates! Ab at commodi debitis dolorem ea facere ipsam itaque quas sunt, unde voluptas.
    </div>
    <div>Architecto assumenda consequuntur facilis possimus quod! A ad cupiditate deleniti, deserunt earum eius enim eveniet
        fugiat harum id libero rem. Accusamus ad consectetur debitis eveniet excepturi laudantium molestias necessitatibus
        porro.
    </div>
    <div>Architecto assumenda aut autem cum dignissimos, dolore dolorum eius, esse explicabo facilis hic illum, incidunt
        itaque maxime mollitia nihil quibusdam quisquam voluptatibus. Dolore doloremque esse facere obcaecati officiis optio
        veritatis?
    </div>
    <div>At, illum, voluptatibus. Aliquid fuga odit praesentium quidem reiciendis soluta ut, voluptates voluptatibus. A
        accusamus ad aperiam exercitationem fugiat nam qui tempore vero. Earum nobis officiis, quam quis sed veniam.
    </div>
    <div>Eum, iusto, placeat. Architecto, at autem cumque dolore hic inventore laboriosam laudantium magnam minima natus
        numquam odit optio pariatur quae quas quis, reiciendis repellat repellendus sunt tempore totam veritatis voluptatem.
    </div>
    <div>Ab accusantium aut debitis excepturi hic laborum non velit. Architecto corporis delectus distinctio error est
        excepturi exercitationem facere hic magnam molestias nobis, numquam officia porro qui quo sapiente sed vel!
    </div>
    <div>Adipisci aliquam aperiam aspernatur assumenda aut cum cumque deleniti eligendi eos harum illum in laboriosam maxime
        molestias natus odit officia omnis quae qui quia quidem quos, reprehenderit sapiente sit tempora!
    </div>
    <div>Asperiores eum id impedit, iure sunt ut voluptatibus. Aliquam deleniti doloribus ducimus, eaque, earum explicabo
        numquam odio officia provident quos rem reprehenderit temporibus unde vitae voluptatibus. Esse illo odio sequi!
    </div>
    <div>Accusantium asperiores distinctio eos eveniet fuga illo incidunt iure magnam natus obcaecati sequi similique ullam,
        voluptate! Accusamus assumenda cupiditate dolorem expedita, fuga omnis quibusdam quod reiciendis rem repellendus,
        soluta totam?
    </div>
    <div>A asperiores dolor, dolore eius esse ex explicabo harum, in itaque laboriosam laborum molestias nesciunt nihil non
        perferendis rerum sed velit? Adipisci aliquam amet, aspernatur dicta placeat quaerat reiciendis voluptatem?
    </div>
    <div>Cumque doloremque doloribus laborum placeat, quasi quia sequi sint ut voluptatibus. Esse fuga id iste quasi
        quibusdam quisquam ut vel? Ad animi cum magnam minus obcaecati sapiente tenetur, velit voluptates?
    </div>
    <div>Accusamus architecto assumenda autem dolore eligendi error facilis illo, impedit inventore magni molestiae neque
        nesciunt, non nulla officia pariatur perspiciatis possimus quae quam quia quibusdam quidem, quisquam reiciendis
        repellat velit.
    </div>
    <div>Adipisci amet cumque, debitis dignissimos, error illum impedit ipsa itaque iure laudantium magnam modi mollitia nam
        natus neque odio odit optio provident quam quas quasi quo tempore temporibus ut voluptatibus!
    </div>
    <div>Adipisci beatae, cupiditate dolores dolorum est et expedita, explicabo facere, laborum laudantium maiores minima
        necessitatibus numquam obcaecati perferendis reprehenderit veniam voluptatum. Alias dolorem facere inventore magni
        nihil sapiente sed, voluptate.
    </div>
</div>
</body>
</html>